<template>
  <div class="common-layout">
    <el-container>
      <!-- 侧边选择栏 -->
      <el-aside width="200px">
        <el-collapse v-model="activeNames" @change="handleChange" accordion>
          <el-collapse-item 
            v-for="(item, index) in informationer" 
            :key="index" 
            :title="item.name" 
            :name="index + 1" 
            @click="selectMessage(item)"
          >
            <p>{{ item.description }}</p>
          </el-collapse-item>
        </el-collapse>
      </el-aside>
      <el-container>
        <el-main>
          <div>
            <h2>{{ selectedMessage?.name }}</h2>
            <p v-if="selectedMessage" :style="{ color: 'rgb(57,197,187)' }">{{ selectedMessage?.autosend }}</p>
            <div v-for="msg in messages" :key="msg.id" style="color: rgb(64,158,255);">
              {{ msg.content }}
            </div>
          </div>
        </el-main>
        <!-- 底部消息输入框 -->
        <el-footer>
          <textarea id="message" class="message-box" v-model="newMessage" placeholder="请输入消息内容"></textarea>
          <el-button class="send-button" @click="sendMessage">发送</el-button>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      informationer: [
        { id: 0, name: "系统消息", description: "这里是系统消息，接收系统消息",autosend:"欢迎使用众筹平台，请关注后续消息" },
        { id: 1, name: "测试消息", description: "这里是测试消息，接收测试消息",autosend:"欢迎来到蓝图分队的测试消息" },
      ],
      activeNames: [],
      selectedMessage: null,
      messages: [],
      newMessage: '',
    };
  },
  methods: {
    handleChange() {
      // 可选逻辑
    },
    selectMessage(item) {
      this.selectedMessage = item; // 选择消息后展示
    },
    sendMessage() {
      if (this.newMessage.trim()) {
        this.messages.push({ id: this.messages.length, content: this.newMessage });
        this.newMessage = ''; // 发送后清空输入框
      }
    },
  },
};
</script>

<style scoped>
.common-layout {
  width: 90%;
  height: 90%;
  padding: 20px;
  border: 1px solid #ccc;
}
.el-container {
  height: 100%;
}
.el-aside {
  margin-right: 10px;
  padding-right: 20px;
  border-right: 1px solid #ccc;
}
.el-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.el-footer {
  height: 100px;
  border-top: 1px solid #ccc;
  text-align: center;
  padding: 10px;
  margin-top: auto;
}
.message-box {
  width: 90%;
  height: 90%;
  margin-right: 10px;
}
.send-button {
  height: 50%;
}
</style>
